<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<!--<meta http-equiv=Content-Type content="text/html;charset=utf-8">-->
<!--    <link rel="stylesheet" type="text/css" th:href="@{/js/elementui/theme-chalk/index.css}"/>-->
    <div th:insert="main :: common_head"></div>
    <link rel="stylesheet" type="text/css" th:href="@{/css/searchableSelect.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/searchableSelect1.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/searchableSelect2.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/searchableSelect3.css}"/>
</head>
<style>
    .mylabel {
        display: inline;
    }

    .greenColor {
        color: green;
    }

    .redColor {
        color: red;
    }

    /*::v-deep .el-input {*/
    /*    height: 50px;*/
    /*}*/
</style>
<body>
<!--删除提示模态框-->
<div class="modal fade" id="delcfmModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">提示</h4>
            </div>
            <div class="modal-body">是否要删除？</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="deleteProperty()">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!--删除提示模态框结束-->

<div class="container-fluid-full">
    <div class="row-fluid">

        <noscript>
            <div class="alert alert-block span10">
                <h4 class="alert-heading">Warning!</h4>
                <p>You need to have <a href="" target="_blank">JavaScript</a> enabled to use this site.</p>
            </div>
        </noscript>

        <!-- start: Content -->
        <div id="content" class="span10" style="width: 100%;">
            <ul class="breadcrumb" th:if="${#request.getParameter('breadcrumb') == 'true'}">
                <li>
                    <i class="fas fa-circle-notch"></i>
                    <a id="home" href="#" onclick="parent.location.reload()">主页</a>
                    <i class="icon-angle-right"></i>
                </li>
                <li><a href="#">[[${deviceType.typeName}]]</a></li>
            </ul>
            <div class="row-fluid sortable">
                <div class="box span12">
                    <div class="box-header" data-original-title>
                        <h2><i class="halflings-icon white edit"></i><span class="break"></span>添加[[${deviceType.typeName}]]</h2>
                    </div>
                    <div class="box-content">
                        <!--<form class="form-horizontal"  th:action="@{/device/addDevice}" method="post">-->
                        <form id="form1" class="form-horizontal" enctype="multipart/form-data" method="post">
                            <input type="hidden" id="typeId" name="type_id" th:value="${deviceType.typeId}">
                            <fieldset>
                                <div class="control-group">
                                    <label class="control-label">设备名</label>
                                    <div class="controls">
                                        <input class="input-xlarge focused" type="text" placeholder=""
                                               name="deviceName" onchange="checkName()" required="required"
                                               id="deviceName">
                                        <div style="display: inline" id="checkName"></div>
                                        <span style="color:red;font-size: 20px">*</span>
                                    </div>
                                </div>
<!--                                为了兼容 bootstrap 框架，每个搜索框都要额外引入一个 searchableSelect.js、searchableSelect.css、在 deviceAdd.js 中添加逻辑实现-->
                                <div class="control-group">
                                    <label class="control-label">能量编码</label>
                                    <div class="controls">
                                        <select id="devPointId"  name="devPointId">
                                            <option value=""></option>
                                        </select>
                                        <span style="color:red;font-size: 20px">*</span>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">电量编码</label>
                                    <div class="controls">
                                        <select id="batteryPointId"  name="batteryPointId">
                                            <option value=""></option>
                                        </select>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">内温编码</label>
                                    <div class="controls">
                                        <select id="temperaturePointId"  name="temperaturePointId">
                                            <option value=""></option>
                                        </select>
                                    </div>
                                </div>
                                <div class="control-group" th:if="${deviceType.typeId==2}">
                                    <label class="control-label">放能完成标志</label>
                                    <div class="controls">
                                        <select id="endFlagId"  name="endFlagId">
                                            <option value=""></option>
                                        </select>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">是否纳入决策</label>
                                    <div class="controls">
                                        <select name="isPredicted" id="isPredicted">
                                            <option value="0">纳入决策</option>
                                            <option value="1">不纳入决策</option>
                                            <option value="2">只显示策略建议</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">影响因素选择</label>
                                    <div class="controls">
                                        <select name="enableFactors" id="enableFactors">
                                            <option value="0">光</option>
                                            <option value="1">风</option>
                                            <option value="2" selected="selected">所有</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="control-group" th:if="${deviceType.typeId==2}">
                                    <label class="control-label">上限温度</label>
                                    <div class="controls">
                                        <input class="input-xlarge focused" type="text" placeholder="" name="upperTemp" required="required" id="upperTemp" style="width: 100px">­°C
                                    </div>
                                </div>
                                <div class="control-group" th:if="${deviceType.typeId==2}">
                                    <label class="control-label">下限温度</label>
                                    <div class="controls">
                                        <input class="input-xlarge focused" type="text" placeholder="" name="lowerTemp" required="required" id="lowerTemp" style="width: 100px">­°C
                                    </div>
                                </div>
                                <div class="control-group" th:if="${deviceType.typeId==2}">
                                    <label class="control-label">设备冷热属性</label>
                                    <div class="controls">
                                        <label class="radio"><input name="coldorheat" checked="checked" type="radio" value="0">冷</label>
                                        <div style="clear:both"></div>
                                        <label class="radio"><input name="coldorheat" type="radio" value="1">热</label>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">平均每小时产能量</label>
                                    <div class="controls">
                                        <input class="input-xlarge focused" type="number" placeholder="" name="power" id="power" required="required">
                                        <span style="font-size: 20px">kWh</span>
                                        <span style="color:red;font-size: 20px">*</span>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">能效比</label>
                                    <div class="controls">
                                        <input class="input-xlarge focused" type="number" placeholder="" name="conversionRate" required="required" id="conversionRate">
                                        <span style="color:red;font-size: 20px">*</span>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">能量上限</label>
                                    <div class="controls">
                                        <input class="input-xlarge focused" type="number" placeholder="" name="cap" id="cap" required="required">
                                        <span style="font-size: 20px">kWh</span>
                                        <span style="color:red;font-size: 20px">*</span>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">设备状态选择</label>
                                    <label style="margin-top: 6px;" class="radio"><input name="deviceMonitorSwitch"
                                        type="radio" value="0">停用</label>
                                        <label style="margin-top: 6px;" class="radio"><input name="deviceMonitorSwitch"
                                            checked="checked" type="radio" value="1">启用</label>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">设备条件停用</label><!-- 纵排列-->
                                    <div class="controls" style="display: flex;flex-direction: column;">
                                        <div id="col0" style="display:block; text-align:left;">
                                            <label style="margin-top: 6px;" class="radio"><input id="endIndex1" name="endButton"
                                                type="radio" value="1" onclick="endOnChange()">启用</label>
                                            <label style="margin-top: 6px;" class="radio"><input id="endIndex2" name="endButton"
                                                checked="checked" type="radio" value="0" onclick="endOffChange()">关闭</label>
                                        </div>
                                        <div id="col1" style="display: block;text-align: left;">
                                            <!-- 横排列停用条件 -->
                                            <div class="controls" style="display:flex; flex-direction:row; margin-left:0px; margin-top:10px;">
                                                <div id="row1" style="display: none;text-align: left;padding-left: 7px;">
                                                    <select name="endCondition" id="endCondition" onchange="effectype(this.value)" style="width: 110px;">
                                                        <option value="0" selected="selected">天气</option>
                                                        <option value="1">风力</option>
                                                        <option value="2">温度</option>
                                                        <option value="3">湿度</option>
                                                    </select>
                                                </div>
                                                <div id="row2" style="display: none;text-align: left;padding-left: 7px;">
                                                    <select name="endOperator" id="endOperator" onchange="effectype(this.value)" style="width: 110px;">
                                                        <option value="0" selected="selected"> > </option>
                                                        <option value="1"> < </option>
                                                        <option value="2"> = </option>
                                                        <option value="3"> >= </option>
                                                        <option value="4"> <= </option>
                                                    </select>
                                                </div>
                                                <div id="row3" style="display: none;text-align: left;padding-left: 7px;">
                                                    <input class="input-xlarge focused" type="text" placeholder="" id="end_value" name="endValue">
                                                    <span style="color:red;font-size: 20px">*</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">启用影响因素</label>
                                    <div class="controls" style="display: flex;flex-direction: row;">
                                        <div id="row0" style="display: block;text-align: left;">
                                            <select name="startButton" id="startButton" onchange="startSelect(this.value)">
                                            <option value="0" selected="selected">模型计算</option>
                                            <option value="1">按条件开启</option>
                                            <option value="2">根据开启时间开启</option>
                                            </select>
                                        </div>
                                        <div id="row4" style="display: none;text-align: left;padding-left: 7px;">
                                            <select name="startCondition" id="startCondition" onchange="effectype(this.value)" style="width: 110px;">
                                                <option value="0" selected="selected">天气</option>
                                                <option value="1">风力</option>
                                                <option value="2">温度</option>
                                                <option value="3">湿度</option>
                                            </select>
                                        </div>   
                                        <div id="row5" style="display: none;text-align: left;padding-left: 7px;">
                                            <select name="startOperator" id="startOperator" onchange="effectype(this.value)" style="width: 110px;">
                                                <option value="0" selected="selected"> > </option>
                                                <option value="1"> < </option>
                                                <option value="2"> = </option>
                                                <option value="3"> >= </option>
                                                <option value="4"> <= </option>
                                            </select>
                                        </div>
                                        <div id="row6" style="display: none;text-align: left;padding-left: 7px;">
                                            <input class="input-xlarge focused" type="text" placeholder="" id="startValue" name="startValue">
                                            <span style="color:red;font-size: 20px">*</span>
                                        </div>   
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">设备开启时间</label>
                                    <div class="controls">
                                        <!--<input class="input-xlarge focused" type="text" placeholder=""-->
                                        <!--name="cap" id="cap">-->
                                        <select name="time" id="timeStart">
                                            <option value="0">0:00</option>
                                            <option value="1">1:00</option>
                                            <option value="2">2:00</option>
                                            <option value="3">3:00</option>
                                            <option value="4">4:00</option>
                                            <option value="5">5:00</option>
                                            <option value="6">6:00</option>
                                            <option value="7">7:00</option>
                                            <option value="8">8:00</option>
                                            <option value="9">9:00</option>
                                            <option value="10">10:00</option>
                                            <option value="11">11:00</option>
                                            <option value="12">12:00</option>
                                            <option value="13">13:00</option>
                                            <option value="14">14:00</option>
                                            <option value="15">15:00</option>
                                            <option value="16">16:00</option>
                                            <option value="17">17:00</option>
                                            <option value="18">18:00</option>
                                            <option value="19">19:00</option>
                                            <option value="20">20:00</option>
                                            <option value="21">21:00</option>
                                            <option value="22">22:00</option>
                                            <option value="23">23:00</option>
                                        </select>
                                        <span>至</span>
                                        <select name="time" id="timeEnd">
                                            <option value="0">0:00</option>
                                            <option value="1">1:00</option>
                                            <option value="2">2:00</option>
                                            <option value="3">3:00</option>
                                            <option value="4">4:00</option>
                                            <option value="5">5:00</option>
                                            <option value="6">6:00</option>
                                            <option value="7">7:00</option>
                                            <option value="8">8:00</option>
                                            <option value="9">9:00</option>
                                            <option value="10">10:00</option>
                                            <option value="11">11:00</option>
                                            <option value="12">12:00</option>
                                            <option value="13">13:00</option>
                                            <option value="14">14:00</option>
                                            <option value="15">15:00</option>
                                            <option value="16">16:00</option>
                                            <option value="17">17:00</option>
                                            <option value="18">18:00</option>
                                            <option value="19">19:00</option>
                                            <option value="20">20:00</option>
                                            <option value="21">21:00</option>
                                            <option value="22">22:00</option>
                                            <option value="23">23:00</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <div class="control-group">
                                    <label class="control-label">设备启动间隔</label>
                                    <div class="controls">
                                        <input class="input-xlarge focused" type="number" placeholder="" name="intervalTime" required="required" id="intervalTime" value = "0">
                                        <span style="font-size: 20px">min</span>
                                        
                                    </div>
                                </div>
                                <div class="control-group">
                                    <label class="control-label">最大功率自动调节</label>
                                    <div class="controls" style="display: flex; flex-direction: column;">
                                        <div>
                                            <label class="control-label">是否自动调节</label>
                                            <label style="margin-top: 6px;" class="radio"><input name="powerMonitorSwitch"
                                                    type="radio" value="1" onclick="autoChangeYes()">是</label>
                                            <label style="margin-top: 6px;" class="radio"><input name="powerMonitorSwitch"
                                                    checked="checked" type="radio" value="0" onclick="autoChangeNo()">否</label>
                                            <!-- <span style="color:red;font-size: 20px;margin-top: 6px;">*</span> -->
                                        </div>

                                        <div  id="autoAdjustElem" style="display: none">
                                            <label class="control-label">自动调节持续天数</label>
                                            <input class="input-xlarge" type="number" placeholder="" name="autoAdjustLastTime" id="autoAdjustLastTime" style="margin-left: 40px;">
                                        </div>
                                    </div>
                                </div>

                               
                                <div class="control-group">
                                    <label class="control-label">设备图片</label>
                                    <div class="controls">
                                        <input class="input-xlarge focused" type="file" id="pic" accept="image/jpg,image/jpeg,image/png,image/PNG" placeholder="" name="pic">
                                        <span style="color:red;font-size: 20px">*</span>
                                    </div>
                                    
                                </div>
                                <div class="control-group">
                                    <label class="control-label">高亮图片</label>
                                    <div class="controls">
                                        <input class="input-xlarge focused"
                                               accept="image/jpg,image/jpeg,image/png,image/PNG" type="file"
                                               placeholder="" id="highlightPic" name="pic">
                                               <span style="color:red;font-size: 20px">*</span>
                                    </div>
                                    
                                </div>
                                <div class="form-actions">
                                    <button type="submit" class="btn btn-primary" onclick="toAdd();return false">提交
                                    </button>
                                    <button type="button" class="btn btn-primary" onclick="toDevice()">返回</button>
                                    <!--<button type="button" class="btn btn-primary" id="addAttr" onclick="addProperty()">
                                        添加属性
                                    </button>-->
                                </div>
                            </fieldset>
                        </form>

                    </div>
                </div>
                <!--/span-->

            </div>
            <!--/row-->
        </div>
    </div>
</div>

<div class="modal hide fade" id="myModal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Settings</h3>
    </div>
    <div class="modal-body">
        <p>Here settings can be configured...</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>
<div class="common-modal modal fade" id="common-Modal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <ul class="list-inline item-details">
            <li><a href="http://sc.chinaz.com">Admin templates</a></li>
            <li><a href="http://sc.chinaz.com">Bootstrap themes</a></li>
        </ul>
    </div>
</div>
<div class="clearfix"></div>


<div th:replace="main::common_js"></div>

<script th:src="@{/js/searchableSelect.js}"></script>
<script th:src="@{/js/searchableSelect1.js}"></script>
<script th:src="@{/js/searchableSelect2.js}"></script>
<script th:src="@{/js/searchableSelect3.js}"></script>
<script th:src="@{/js/deviceGetAllPoint.js}"></script>

<script th:src="@{/js/detect-element-resize.js}"></script>
<script th:src="@{/js/iframe-resize.js}"></script>

<script th:inline="javascript">
    breadcrumb()
    window.onload = function() {
        parent.modifyTitle([[${deviceType.typeName}]])
    }
</script>

<script>
    $(function () {
        autoChangeNo();
    })

    var startSelect1=1;
    var endSelect=0;
    var addCheckName = false;

    function startSelect(ele) {
        if(ele == "1") {
            //initAnalysisBar1("1");//发送一个ajax请求
            startSelect1=0;
            $("#row4").css("display", "block"); //显示
            $("#row5").css("display", "block");
            $("#row6").css("display", "block");
        } else if(ele == "2") {
            //initAnalysisBar2("1");//发送一个ajax请求
            $("#row4").css("display", "none");
            $("#row5").css("display", "none");
            $("#row6").css("display", "none");
        } else if(ele == "0") {
            //initAnalysisBar3("1");//发送一个ajax请求
            $("#row4").css("display", "none");
            $("#row5").css("display", "none");
            $("#row6").css("display", "none");
        }
    }

    function endOnChange(ele) {
        endSelect=1;
        $("#row1").css("display", "block"); //显示
        $("#row2").css("display", "block");
        $("#row3").css("display", "block");
    }
    
    function endOffChange(ele) {
        endSelect=0;
        $("#row1").css("display", "none");
        $("#row2").css("display", "none");
        $("#row3").css("display", "none");
    }

    //返回上一页
    function toDevice() {
        window.history.back(-1);
    }

    //最大功率调节为是，自动调节天数设置默认值为3
    function autoChangeYes(){
        document.getElementById("autoAdjustElem").style.display = "block";
        document.getElementById("autoAdjustLastTime").value = 3;
    }
    //最大功率调节为否，自动调节天数设置默认值为null
    function autoChangeNo(){
        document.getElementById("autoAdjustElem").style.display = "none";
        document.getElementById("autoAdjustLastTime").value = "";
    }

    //添加设备
    function toAdd() {
        var formData = new FormData($("#form1")[0]); //获取form表单，使用FormData数据格式
        console.log("formData:",JSON.stringify(formData))
        console.log("formData:",formData)
        var start = document.getElementById("timeStart"); //设备开启时间
        var end = document.getElementById("timeEnd"); //设备结束时间
        var startTime = Number(start.value);
        var endTime = Number(end.value);
        var startValue =  document.getElementById("startValue");
        var endValue =  document.getElementById("end_value");
        var deviceName = document.getElementById("deviceName"); //设备名称
        var power = document.getElementById("power"); //平均每小时产能
        var devCode = document.getElementById("devPointId"); //设备编号
        var conversionRate = document.getElementById("conversionRate"); //能效比
        var cap = document.getElementById("cap"); //上限
        var pic = $('#pic').get(0).files[0]; //设备图片
        var highPic = $('#highlightPic').get(0).files[0]; //设备高亮图片

        if (deviceName.value == "") {
            window.parent.layerAlert('设备名不能为空', {
                icon: 5,
                title: "提示"
            });
            return false;
        }
        if (devCode.value == "") {
            window.parent.layerAlert('能量编码不能为空', {
                icon: 5,
                title: "提示"
            });
            return false;
        }
        if (power.value == "") {
            window.parent.layerAlert('功率不能为空', {
                icon: 5,
                title: "提示"
            });
            return false;
        }
        if (conversionRate.value == "") {
            window.parent.layerAlert('能效比不能为空', {
                icon: 5,
                title: "提示"
            });
            return false;
        }
        if (cap.value == "") {
            window.parent.layerAlert('上限不能为空', {
                icon: 5,
                title: "提示"
            });
            return false;
        }
        if (addCheckName == false) {
            window.parent.layerAlert('请输入未被使用的设备名', {
                icon: 5,
                title: "提示"
            });
            return false;
        }
        // if ((startTime - endTime) >= 0) {
        //     window.parent.layerAlert('请输入合理的时间段', {
        //         icon: 5,
        //         title: "提示"
        //     });
        //     return false;
        // }
        if (!pic) {
            window.parent.layerAlert('设备图片不能为空', {
                icon: 5,
                title: "提示"
            });
            return false;
        }
        if (!highPic) {
            window.parent.layerAlert('高亮图片不能为空', {
                icon: 5,
                title: "提示"
            });
            return false;
        }
        if (startValue.value == ""&& startSelect1==0) {
            window.parent.layerAlert('启用影响因素不能为空', {
                icon: 5,
                title: "提示"
            });
            return false;
        }
        if (endValue.value == ""&&endSelect==1) {
            window.parent.layerAlert('设备停用条件不能为空', {
                icon: 5,
                title: "提示"
            });
            return false;
        }
        // 如果平均产能量大于能量上限时提示
        if (power > cap) {
            window.parent.layerAlert('产能量不能大于能量上限', {
                icon: 5,
                title: "提示"
            });
            return false;
        }

        $.ajax({
            type: "POST",
            data: formData,
            url: "/multipower/device/addDevice",
            processData: false,
            contentType: false,
            dataType: "json",
            success: function (res){
                if (addCheckName == true && res.success) {
                    window.alert("添加成功");
                    window.location.href = "/multipower/device/" + res.data;
                }else if(!res.success){
                    window.alert(res.message);
                }
            },
        })
    }

    function checkName() {
        var deviceName = $("#deviceName").val(); //设备名
        $.ajax({
            type: "GET",
            data: {
                deviceName: deviceName
            },
            url: "/multipower/device/check",
            success: function (data) {
                if (data.check == "yes") { //设备名可以使用
                    var span = document.createElement("span");
                    span.setAttribute("class", "greenColor");
                    span.innerHTML = "该设备名可以使用";
                    $("#checkName").html(span);
                    addCheckName = true;
                }
                if (data.check == "no") { //设备名已存在
                    var span = document.createElement("span");
                    span.setAttribute("class", "redColor");
                    span.innerHTML = "该设备名已存在，请使用其他设备名";
                    $("#checkName").html(span);
                    addCheckName = false;
                }
            },
        })
    }
</script>
</body>

</html>